<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>协同工作系统原型设计</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .prototype-container {
            display: flex;
            gap: 2rem;
            padding: 2rem;
            max-width: 1600px;
            margin: 0 auto;
        }
        .prototype {
            flex: 1;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
        }
        .design-notes {
            width: 400px;
            background: #2d3748;
            color: white;
            border-radius: 12px;
            padding: 1.5rem;
        }
        .nav-item {
            cursor: pointer;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            transition: all 0.2s;
        }
        .nav-item:hover {
            background: #e2e8f0;
        }
        .active {
            background: #4299e1;
            color: white;
        }
        .document-card {
            cursor: pointer;
            transition: all 0.2s;
        }
        .document-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .design-note-item {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        /* 新增样式 */
        .user-menu {
            position: relative;
        }
        .user-dropdown {
            position: absolute;
            right: 0;
            top: 100%;
            margin-top: 0.5rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            min-width: 200px;
            display: none;
        }
        .user-dropdown.active {
            display: block;
        }
        .user-dropdown-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .user-dropdown-item:hover {
            background: #f3f4f6;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-avatar:hover {
            transform: scale(1.1);
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="prototype-container">
        <!-- 原型部分 -->
        <div class="prototype">
            <!-- 顶部导航 -->
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center space-x-2">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='%234299e1'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'%3E%3C/path%3E%3C/svg%3E" alt="Logo" class="w-8 h-8">
                    <h1 class="text-xl font-bold">协同空间</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-4 py-2 rounded-lg hover:from-blue-600 hover:to-indigo-700 transition-all duration-300 transform hover:scale-[1.02] focus:scale-[0.98]">
                        + 新建文档
                    </button>
                    <div class="user-menu">
                        <div class="relative">
                            <div class="user-avatar bg-blue-500 text-white flex items-center justify-center">
                                <span class="text-lg font-medium">张</span>
                            </div>
                            <span class="notification-badge">3</span>
                        </div>
                        <div class="user-dropdown">
                            <div class="p-4 border-b border-gray-200">
                                <div class="font-medium">张三</div>
                                <div class="text-sm text-gray-500">zhangsan@example.com</div>
                            </div>
                            <div class="user-dropdown-item text-red-500">
                                <span class="flex items-center">
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                    </svg>
                                    退出登录
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主要内容区 -->
            <div class="flex gap-6">
                <!-- 左侧导航 -->
                <div class="w-48">
                    <div class="space-y-2">
                        <div class="nav-item active">
                            📑 所有文档
                        </div>
                        <div class="nav-item">
                            ⭐ 收藏夹
                        </div>
                        <div class="nav-item">
                            👥 共享文件
                        </div>
                        <div class="nav-item">
                            🗑️ 回收站
                        </div>
                    </div>
                </div>

                <!-- 右侧内容 -->
                <div class="flex-1">
                    <div class="mb-4">
                        <input type="text" placeholder="搜索文档..." class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:border-blue-500">
                    </div>

                    <!-- 文档网格 -->
                    <div class="grid grid-cols-3 gap-4">
                        <div class="document-card p-4 bg-gray-50 rounded-lg border border-gray-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-blue-500">📄</span>
                                <div class="flex space-x-2">
                                    <span class="text-sm text-gray-500">👥 3</span>
                                    <span class="text-sm text-gray-500">⭐</span>
                                </div>
                            </div>
                            <h3 class="font-medium">项目计划书</h3>
                            <p class="text-sm text-gray-500">更新于 2小时前</p>
                        </div>

                        <div class="document-card p-4 bg-gray-50 rounded-lg border border-gray-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-green-500">📊</span>
                                <div class="flex space-x-2">
                                    <span class="text-sm text-gray-500">👥 5</span>
                                    <span class="text-sm text-gray-500">⭐</span>
                                </div>
                            </div>
                            <h3 class="font-medium">数据分析报告</h3>
                            <p class="text-sm text-gray-500">更新于 昨天</p>
                        </div>

                        <div class="document-card p-4 bg-gray-50 rounded-lg border border-gray-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-yellow-500">📝</span>
                                <div class="flex space-x-2">
                                    <span class="text-sm text-gray-500">👥 2</span>
                                </div>
                            </div>
                            <h3 class="font-medium">会议记录</h3>
                            <p class="text-sm text-gray-500">更新于 3天前</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 添加用户菜单交互
        const userAvatar = document.querySelector('.user-avatar');
        const userDropdown = document.querySelector('.user-dropdown');

        userAvatar.addEventListener('click', (e) => {
            e.stopPropagation();
            userDropdown.classList.toggle('active');
        });

        document.addEventListener('click', () => {
            userDropdown.classList.remove('active');
        });

        // 阻止下拉菜单点击事件冒泡
        userDropdown.addEventListener('click', (e) => {
            e.stopPropagation();
        });

        // 添加导航项点击交互
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
                item.classList.add('active');
            });
        });

        // 添加文档卡片点击效果
        document.querySelectorAll('.document-card').forEach(card => {
            card.addEventListener('click', () => {
                alert('打开文档...');
            });
        });
    </script>
</body>
</html> 